<template>
  <div class="login-page flex-col">
    <div class="login-background flex-col">
      <div class="login-container flex-col">
        <div class="login-box flex-col">
          <div class="platform-title-container">
            <span class="platform-title">空间资源综合管理平台</span>
          </div>
          <div class="login-body">
            <div class="login-form flex-col">
              <span class="form-title">系统登陆</span>
              <div class="input-container flex-row">
                <div class="input-group flex-row justify-between">
                  <img class="input-icon" referrerpolicy="no-referrer"
                    src="../assets/img/login/SketchPng4f5787fcb0af832a275b4406df3092b516eb3d7e6b70877613395e1b027b00ad.png"
                    alt="Username Icon" />
                  <input type="text" placeholder="请输入账号" v-model="username" />
                </div>
              </div>
              <div class="input-container flex-row">
                <div class="input-group flex-row justify-between">
                  <img class="input-icon" referrerpolicy="no-referrer"
                    src="../assets/img/login/SketchPngf7b2751017bd966015eecb44c5cae381c578a7768ac511a6649c2d9ef4d5262e.png"
                    alt="Password Icon" />
                  <input type="password" placeholder="请输入密码" v-model="password" />
                </div>
              </div>
              <div class="captcha-container flex-row justify-between">
                <div class="captcha-label flex-col">
                  <input type="text" placeholder="请输入验证码" v-model="captcha" />
                </div>
                <img class="captcha-image" referrerpolicy="no-referrer"
                  src="../assets/img/login/eba7a2031c434fc18e67e245e3727937_mergeImage.png" alt="Captcha" />
              </div>
              <button class="login-button flex-col" @click="login">
                <span class="button-text">登录</span>
              </button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      captcha: '',
      uuid: '',
    };
  },
  methods: {
    login() {
      console.log('Attempting to log in with:', this.username, this.password, this.captcha);
      this.uuid = '111';


      const userInfo = {
        username: this.username,
        token: 'mocked_token',  // 模拟一个 token
        expires_in: 3600        // 模拟 token 过期时间
      };

      // 直接提交到 Vuex
      this.$store.commit('SET_TOKEN', userInfo.token); // 设置 token
      this.$store.commit('SET_NAME', userInfo.username); // 设置用户名

      this.$router.push('/homePage');
      
      // this.$store.dispatch('Login', {
      //   username: this.username,
      //   password: this.password,
      //   code: this.captcha,
      //   uuid: this.uuid
      // }).then(() => {
      //   console.log('Login successful, now fetching user info...');
      //   this.$store.dispatch('GetInfo').then(res => {
      //     const userName = res.user.userName;
      //     console.log('用户名:', userName);
      //     this.$router.push('/homePage');
      //   });
      // }).catch(err => {
      //   console.error('登录失败:', err);
      // });
    }

  }
};
</script>

<style scoped>
.login-page {
  background-color: rgba(6, 23, 38, 1);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.login-background {
  height: 100%;
  background: url(../assets/img/login/SketchPng62fe43335a438a46d442e6d12f109df27e9d7c9d9b702bcc21a34510e3e4036b.png) no-repeat;
  background-size: cover;
  width: 100%;
}

.login-container {
  background-image: url(../assets/img/login/ff886a44d86243d4954fe0278e631b5d_mergeImage.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  margin-left: 2px;
  width: calc(100% - 2px);
}


.login-box {
  width: 100%;
  height: 100%;
  background: url(../assets/img/login/SketchPngbfe850a823c9f73461307c024e1c9aa2463c829671363a911fb3481e4e0bf794.png) no-repeat;
  background-size: cover;
  /* margin-left: -2px; */
}

.platform-title-container {
  text-align: center;
}

.platform-title {
  text-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
  font-size: 36px;
  color: #ffffff;
  margin-bottom: 20px;
}


.login-body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}


.login-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url(../assets/img/login/loginformbg.png) no-repeat center center;
  background-size: contain;
  width: 40%;
  height: 60vh;
  /* padding-top: 4rem; */
}

.form-title {
  font-size: 40px;
  color: #ffffff;
  margin-bottom: 20px;
}

.input-container {
  background: url(../assets/img/login/loginformitembg1.png) no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  padding-left: 20px;
  /* 控制距离左侧的距离 */
  width: 50%;
  margin-bottom: 1.5rem;
  height: 7vh;
}

.input-group {
  display: flex;
  align-items: center;
  width: 100%;
  margin-left: 2.5rem;
}

.input-icon {
  margin-right: 10px;
}

input[type="text"],
input[type="password"] {
  background-color: transparent;
  /* 背景色透明 */
  border: none;
  color: #ffffff;
  /* 字体颜色 */
  font-size: 16px;
  /* 调整字体大小 */
  width: 100%;
  padding: 10px;
  outline: none;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder {
  color: #cccccc;
  /* 修改占位符的颜色 */
  font-size: 16px;
  /* 确保占位符字体大小与输入文本一致 */
}

.captcha-container {
  background: url(../assets/img/login/loginformitembg1.png) no-repeat;
  display: flex;
  /* 使用 flex 布局，使子元素在同一行 */
  align-items: center;
  /* 垂直居中 */
  justify-content: space-between;
  /* 子元素在两侧对齐 */
  width: 50%;
  /* 可以根据需要设置容器宽度 */
  margin-bottom: 2rem;
}

.captcha-label {
  /* background: url(../assets/img/login/loginformitembg1.png) no-repeat center center; */
  /* background-size: cover; */
  padding: 0.5rem 0rem 0.5rem 5.8rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  /* 垂直居中对齐文本 */
  height: 68px;
  /* 设置背景图的高度 */
  width: 60%;
  /* 设置背景图的宽度，可以根据需要调整 */
}

.captcha-image {
  cursor: pointer;
  width: 32%;
  /* 设置验证码图片的宽度 */
  height: auto;
  /* 保持图片比例 */
}



.login-button {
  /* background-color: #007bff; */
  background: url(../assets/img/login/loginformitembg3.png) no-repeat center center;
  width: 25%;
  background-size: cover;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s;
}

.login-button:hover {
  background: url(../assets/img/login/loginformitembg3.png) no-repeat center center;
  width: 25%;
}

.button-text {
  font-size: 16px;
}
</style>
